<template>
  <div class="form-item">
    <div v-show="conf && conf.name"><span>{{conf && conf.name}}</span></div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "form-item",
  props: ["conf"]
}
</script>
<style scoped>
.form-item{
  display: flex;
  padding: 4px 10px;
}
.form-item>*:first-child{
  flex: 0 0 100px;
  text-align: right;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.form-item>*:first-child>span:after{
  content: " : ";
}
.form-item>*:last-child{
  flex: 1 1 0;
}
</style>
